<template>
    <div class="header">

    </div>

    <div>
        <button @click="$test">Global Test</button>
        <button @click="mockTest">Mock test</button>
        <button @click="mockTestWithProxy">Mock test with Proxy</button>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';


const currentApp = getCurrentInstance();
const { proxy } = getCurrentInstance()!;
console.log("🚀 ~ proxy.appName:", proxy?.appName)
console.log("🚀 ~ currentApp:", currentApp)
console.log("🚀 ~ appName:", currentApp?.appContext.config.globalProperties.appName)


const mockTest = () => {
    currentApp?.appContext.config.globalProperties.$test();
}

const mockTestWithProxy = () => {
    proxy?.$test();
}

</script>

<style lang="scss" scoped>
// 定义 mapping
$breakpoints: (
    phone:(320px, 480px),
    pad:(481px, 768px),
    notepad:(769px, 1024px),
    desktop:(1025px, 1200px),
    tv:1201px,
);

// 定义 mixin
@mixin responseTo($dname) {
    // 根据 device name 获取 mapping
    $bp: map-get($breakpoints, $dname);

    @if type-of($bp)=='list' {
        @media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {
            // 类似于插槽, 将传入的内容放入 @content 中
            @content;
        }
    }

    @else {
        @media (min-width: $bp) {
            @content;
        }
    }
}

.header {
    width: 100px;

    @include responseTo('phone') {
        height: 50px;
        background-color: aqua;
    }

    @include responseTo('pad') {
        height: 60px;
        background-color: brown;
    }

    @include responseTo('notepad') {
        height: 80px;
        background-color: green;
    }

    @include responseTo('desktop') {
        height: 100px;
        background-color: teal;
    }

    @include responseTo('tv') {
        height: 120px;
        background-color: pink;
    }
}
</style>